<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>test slider</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="a.css" rel="stylesheet" type="text/css"  />
</head>
<body>
	<div id = "content">
		<div  id="bgimage" class = "image">
			<div id = "imagecontrol" class = "imagecontrol-pre"onclick="premove()" ></div>
			<div id = "imagecontrol" class = "imagecontrol-next" onclick="nextmove()"></div>
			<div class = "imagemask" >
				<div id = "imagenav" class = "imageselect">
					<ul>
						<li > </li> 
						<li > </li>
						<li > </li>
					</ul>
					<!--<a href="http://www.baidu.com">1</a> 
					<a href="#" >2</a> 
					<a href="#">3</a> -->
				</div>
				<div id="imagetitle" class = "imagetitle"> 
					
				</div>
			</div>
			
		</div>
		
	</div> 


	<script>
		//var ab=document.getElementById("imagenav").getElementsByTagName("a");
		var ab=document.getElementById("imagenav").getElementsByTagName("li");
		for(var i=0; i<ab.length; i++){		
			ab[i].order = i;
			addEvent(ab[i],"mouseover",show);
		//	alert(ab[i].innerHTML);
		}
		
		var j = -1;
		var images=new Array("image/a.jpg","image/b.jpg","image/c.jpg");	
		var pic_div=document.getElementById("bgimage");				
	function nextmove(){
		j++;
		if(j>=images.length){
			j=0;
		}  
		pic_div.style.background="url("+images[j]+") no-repeat";
		 goTime(j);
	}
	function premove(){
	console.log(j);
		j--;
		if(j<0){
			j=images.length - 1;
		};
		pic_div.style.background="url("+images[j]+") no-repeat"; 
		goTime(j);
	}
	
	setTimeout(function() {nextmove();},0);
	
	/*自动播放*/
	currentTime = setInterval(function() {nextmove();}, 2000);
	
	addEvent(pic_div, 'mouseover', function() { clearInterval(currentTime);});
	
	addEvent(pic_div, 'mouseout', function() {
            currentTime = setInterval(function() {
                  nextmove();
                }, 2000);
            });
	
			
	function goTime(j){
		var ab=document.getElementById("imagenav").getElementsByTagName("li");
		for(var i=0; i<ab.length; i++){		
			ab[i].style.backgroundImage="url(image/no.png)";
		}
		
		if(j==0){
			document.getElementById("imagetitle").innerHTML = "昨天";
			ab[2].style.backgroundImage="url(image/yes.png)";
		}else if(j==1){
			document.getElementById("imagetitle").innerHTML = "今天";
			ab[1].style.backgroundImage="url(image/yes.png)";
		}else if(j==2){
			document.getElementById("imagetitle").innerHTML = "后天";
			ab[0].style.backgroundImage="url(image/yes.png)";
		}
		
	}
		
	function show(){ 		
		//alert(this.order);
		//alert(this.innerHTML);
		var ab=document.getElementById("imagenav").getElementsByTagName("li");
		for(var i=0; i<ab.length; i++){		
			ab[i].style.backgroundImage="url(image/no.png)";
		//	alert(ab[i].innerHTML);
		}
		this.style.backgroundImage="url(image/yes.png)";
		if (this.order==2){
			document.getElementById("bgimage").style.backgroundImage="url(image/a.jpg)";
			document.getElementById("imagetitle").innerHTML = "昨天";
			
							}
		else if(this.order==1){
			document.getElementById("bgimage").style.backgroundImage="url(image/b.jpg)";
			document.getElementById("imagetitle").innerHTML = "今天";
		}
		else if(this.order==0){
			document.getElementById("bgimage").style.backgroundImage="url(image/c.jpg)";
			document.getElementById("imagetitle").innerHTML = "后天";
		}
	}
		/*
	function show(){ 		
		//alert(this.order);
		//alert(this.innerHTML);
		if (this.innerHTML=="1"){
			document.getElementById("bgimage").style.backgroundImage="url(image/a.jpg)";
			document.getElementById("imagetitle").innerHTML = "昨天";
							}
		else if(this.innerHTML=="2"){
			document.getElementById("bgimage").style.backgroundImage="url(image/b.jpg)";
			document.getElementById("imagetitle").innerHTML = "今天";
		}
		else if(this.innerHTML=="3"){
			document.getElementById("bgimage").style.backgroundImage="url(image/c.jpg)";
			document.getElementById("imagetitle").innerHTML = "后天";
		}
	}
	*/
	function addEvent(el, type, fn) {
				if(window.addEventListener) {
					el.addEventListener(type, fn, false);
				}else if(window.attachEvent) {
					el.attachEvent('on' + type, fn);
				}
	}
	
					
	function xxx(){
		alert("mouse over");
	}			
	
		


			</script>
</body>
</html>